<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for：列表渲染</title>
    <script src="../lib/vue.global.js"></script>


</head>
<body>


<div id="app">

    <ul>
        <li v-for="city in cities" @click="listItemClick(city)">{{ city.name }}
           <ul v-show="!city.collapse">
               <li v-for="school in city.schools">{{school.name}}</li>
           </ul>

        </li>
    </ul>

</div>

</body>
<script src="../mock/cities.js"></script>
<script src="../lib/vue.global.js"></script>
<script>
     Vue.createApp({
          data:function (){
               return {
                    cities:cities
               }
          },
          methods:{
               listItemClick:function (city){
                   city.collapse = !city.collapse;
               }

          }
     }).mount('#app')

</script>
</html>